You can display mega drop-downs from your primary navigation with a few changes to your theme’s skin file and menu CSS. Mega drop-downs display navigation items within large panels, grouped by level, which reduces scrolling and improves the usability of site navigation.
To implement mega drop-downs
1. Ensure that all navigation items in the sitemap have a value for Content or URL to Link to. Otherwise the navigation hierarchy may not render properly.
2. Edit the website theme’s skin file.
□ Using your preferred text editor, find and open the website theme’s skin file (for example Aspen.skin). Skin files, by default, are located in the theme folders within C:\Program Files\ASI\iMIS\Net\App_Themes.
□ Find the pageNavR control and update it to add the following property:
EnableMegaDropDownMenu="true"
□ (optional) If you are familiar with skin controls, you can configure how the mega drop-down behaves by altering the following properties:
■ EnableMegaDropDownMenu – Enables the mega drop down.
■ MegaDropDownMenuShowStartingNode – Displays the parent navigation node as the first item in the mega drop down. Enter true or false.
■ MegaDropDownMenuLevelSettingLevel – Defines the navigation level at which the number of columns set for MegaDropDownMenuRepeatColumns starts to take effect. For example, if you set MegaDropDownMenuRepeatColumns=”3” and set MegaDropDownMenuLevelSettingLevel=”2”, then the mega dropdown displays three columns for the second and higher navigation levels, and the first level only has one column.
■ MegaDropDownMenuRepeatColumns – Defines the number of columns used to display the navigation.
■ MegaDropDownTooltipLocation – This option only applies to tooltips defined for top level navigation items in the primary navigation. When defined, it specifies the location of the tooltip text if a tooltip is defined for that navigation item. Enter either Menu (displays the tooltip directly beneath the top level navigation item) or Append (displays to the right of the navigation text within the dropdown). If you do not define this property, navigation tooltips are not displayed in the dropdown.
3. Edit the theme’s menu CSS to tailor the display of the mega drop-down for the theme’s look and feel.
□ Using your preferred text editor, find and open the website theme’s menu CSS file (for example Menu.Aspen.css). Menu CSS files, by default, are located in the theme folders within C:\Program Files\ASI\iMIS\Net\App_Themes.
□ Find the MegaDropDownMenu Styling section and edit the styles as needed:
/* ########################## */
/* MegaDropDownMenu Styling */
/* ########################## */
.RadMenu .rmGroup .MegaDropDownMenuOuter .rmText {
padding: 0;
margin: 0;
width: 600px !important;
}
div.MegaDropDownMenu
{
background-color: #f8f7f7;
padding-left: 5px !important;
padding-right: 5px !important;
}
.MegaDropDownMenuToolTip
{
padding: 5px;
}